<template>
  <div class="page sendRecord">
    <mt-datetime-picker
      v-if="startPickerVisible"
      ref="startPicker"
      type="dateTime"
      v-model="startDate"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      confirmText="下一步"
      @confirm="endPicker"
      @cancel="cancelPicker"
      :startDate="startDateScope"
      :endDate="endDateScope"
    ></mt-datetime-picker>
    <mt-datetime-picker
      v-if="endPickerVisible"
      ref="endPicker"
      type="dateTime"
      v-model="endDate"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      :startDate="startDateScope2"
      :endDate="endDateScope"
      @confirm="dateChoice"
      @cancel="cancelPicker"
    ></mt-datetime-picker>
    <sendDetails ref="sendDetails" :msgId="msgId"></sendDetails>
    <div class="scroll-view">
      <customHeader middleTitle="发送记录" @leftCallBack="goBack" />
      <div class="date-wrap">
        <div class="date" @click="startPicker">
          <i class="zhk-activity_rl"></i>
          <span>{{moment(this.startDate).format("YYYY-MM-DD")}} 至 {{moment(this.endDate).format("YYYY-MM-DD")}}</span>
        </div>
      </div>
      <div class="page-body">
        <v-loadmore
          :top-method="loadTop"
          :topDistance="50"
          :auto-fill="false"
          ref="loadmore"
          @top-status-change="handleTopChange"
          style="height:100%"
        >
          <div class="section" ref="wrapper" :style="{ height:'100%' }">
            <no-data msg="暂无数据" v-if="list.length==0"></no-data>
            <ul
              class="record-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="100"
            >
              <li @click.stop="linkToDetail(item.msgId)" v-for="(item,index) in list" :key="index">
                <div class="top">
                  <div class="left">发送时间: {{dateFormate(item.sendTime)}}</div>
                  <div class="right">{{sendStatusFormate(item.sendStatus)}}</div>
                </div>
                <div class="info">
                  <div class="send-content">发送内容：{{item.msgContent }}</div>
                  <div class="send-num">发送条数：{{sendCount(item)}}</div>
                </div>
                <div class="ope" v-if="item.sendStatus==1">
                  <div class="btn" @click.stop="cancelSend(item.msgId)">取消发送</div>
                  <div class="btn" @click.stop="eidt(item.msgId)">编辑</div>
                </div>
              </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
              <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
            </p>
            <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
              <span>已经全部加载完毕</span>
            </div>
          </div>
        </v-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import sendDetails from "../messageMarketing/sendDetails";
import { Toast, MessageBox, DatetimePicker, Loadmore } from "mint-ui";
import noData from "../../components/noData/noData";
import jsBridge from "../../tools/jsBridge.js";
import moment from "moment";
Vue.component(DatetimePicker.name, DatetimePicker);
export default {
  name: "sendRecord",
  data() {
    return {
      from: "",
      topStatus: "",
      msgId: "",
      loading: false,
      noMore: false,
      detailsParams: null,
      moment: moment,
      startDate: new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000),
      endDate: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),
      startDateScope: new Date('2019/6/1'), //可选开始日期范围
      startDateScope2: new Date(), //可选结束日期范围
      endDateScope: new Date(),
      startPickerVisible: false,
      endPickerVisible: false,
      list: [],
      pageNo: 1,
      pageSize: 10,
      nextPage: null,
    };
  },
  methods: {
    goBack() {
      if (this.$refs.sendDetails.popupVisible) {
        this.$refs.sendDetails.popupHide();
      } else {
        if (String(this.$route.query.close) == "true") {
          jsBridge.closeWindow();
        } else {
          if (this.from == "sendMessage") {
            this.$router.push({ path: "/messageMarketing", query: { close: true } });
          } else {
            this.$router.back();
          }
        }
      }
    },
    sendCount(item) {
      if (item.sendStatus == 3) {
        if (item.recSucCount) {
          return item.recSucCount
        } else {
          return item.sendCount;
        }
      }
      else {
        return item.memberCount * item.splitCount;
      }
    },
    loadTop() {
      this.loadData(1);
    },
    handleTopChange(status) {
      this.topStatus = status;
    },
    sendStatusFormate(sendStatus) {
      let v = "";
      if (sendStatus == 0) {
        v = "已取消";
      } else if (sendStatus == 1) {
        v = "待发送";
      } else if (sendStatus == 2) {
        v = "发送中";
      } else if (sendStatus == 3) {
        v = "已发送";
      } else if (sendStatus == 4) {
        v = "发送失败";
      }
      return v;
    },
    dateFormate(date) {
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss');
      } else {
        return date;
      }
    },
    linkToDetail(msgId) {
      if (this.topStatus == "drop" || this.topStatus == "loading") {
        return;
      }
      this.msgId = msgId;
      this.$refs.sendDetails.popupShow();
    },
    //日期选择展开
    startPicker() {
      this.startPickerVisible = true;
      this.endPickerVisible = true;
      this.endDateScope = new Date();
      this.$nextTick(() => {
        this.$refs.startPicker.open();
      });
    },
    //结束日期展开
    endPicker(e) {
      this.startDateScope2 = e;

      //日期选择范围为90天且不超过当前时间
      this.endDateScope = new Date(e.valueOf() + 90 * 24 * 3600 * 1000);
      this.$nextTick(() => {
        this.$refs.endPicker.open();
      });
    },
    //结束日期选择
    dateChoice(e) {
      this.startPickerVisible = false;
      this.endPickerVisible = false;
      this.loadData(1);
    },
    //点取消关闭日期组件
    cancelPicker() {
      this.startPickerVisible = false;
      this.endPickerVisible = false;
    },
    cancelSend(msgId) {
      MessageBox({
        title: '提示',
        message: '确定要取消发送任务吗？',
        showCancelButton: true,
      }).then(action => {
        if (action == "confirm") {
          this.ajax({
            url: `/app/smsmarketing/cancelSendMsg.do?msgId=${msgId}`,
            type: "get",
            controlLoading: true
          })
            .then(res => {
              if (res.success && res.resultObject) {
                this.loadData(1);
                Toast("取消成功");
              } else {
                Toast(res.msg);
              }
            })
            .catch(function (err) {

            });
        }
      });
    },
    eidt(msgId) {
      this.$router.push({ path: "/messageMarketing/sendMessage", query: { msgId: msgId } });
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.loadData();
    },
    loadData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      this.loading = true;
      const params = { startTime: this.startDate.getTime(), endTime: this.endDate.getTime(), pageNo: this.pageNo, pageSize: this.pageSize };
      this.ajax({
        url: `/newapp/smsmarketing/queryMsgList.do`,
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          this.loading = false;
          this.noMore = false;
          if (this.pageNo === 1) {
            this.list = [];
          }
          if (res.success) {
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && data.pageData) {
              this.list = this.list.concat(data.pageData);
              if (data.nextPage > this.pageNo) {
                this.pageNo = data.nextPage;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
          this.$refs.loadmore && this.$refs.loadmore.onTopLoaded && this.$refs.loadmore.onTopLoaded();
        })
        .catch((err) => {
          this.noMore = true;
          this.loading = false;
          this.$refs.loadmore && this.$refs.loadmore.onTopLoaded && this.$refs.loadmore.onTopLoaded();
        });
    },
  },
  computed: {

  },
  created() {
    this.loadData(1);
  },

  components: {
    customHeader,
    sendDetails,
    noData,
    "v-loadmore": Loadmore
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.from = from.name;
    });
  },
};
</script>
<style lang="scss" scoped>
@import "messageMarketing";
</style>